昨天僅在文章後段介紹了呈現UI的HTML檔案index.html，要啟動Electron應用程式，還需要新增一些javascript檔案。

• main.js

  / main.js
  
  / Modules to control application life and create native browser window
  onst { app, BrowserWindow } = require('electron')
  onst path = require('node:path')
  
  onst createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
  	width: 800,
  	height: 600,
  	webPreferences: {
  		preload: path.join(__dirname, 'preload.js')
  	}
  })
  
  // and load the index.html of the app.
  mainWindow.loadFile('index.html')
  
  // Open the DevTools.
  // mainWindow.webContents.openDevTools()
  
  
  / This method will be called when Electron has finished
  / initialization and is ready to create browser windows.
  / Some APIs can only be used after this event occurs.
  pp.whenReady().then(() => {
  createWindow()
  
  app.on('activate', () => {
  	// On macOS it's common to re-create a window in the app when the
  	// dock icon is clicked and there are no other windows open.
  	if (BrowserWindow.getAllWindows().length === 0) {
  		createWindow()
  	}
  })
  )
  
  / Quit when all windows are closed, except on macOS. There, it's common
  / for applications and their menu bar to stay active until the user quits
  / explicitly with Cmd + Q.
  pp.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
  	app.quit()
  }
  )
  
  / In this file you can include the rest of your app's specific main process
  / code. You can also put them in separate files and require them here.
  ``
   需要用到`app`、`BrowserWindow`及`path`三個模組.
  - `app`
  	- 控制應用程式的事件生命週期。
  - `BrowserWindow`
  	- 管理及建立應用程式視窗。
  - `path`
  	- 負責與路徑相關的操作
   使用`createWindow()`來打開視窗。
  - `webPreferences.preload`用來加載預載腳本`preload.js`，使用`preload.js`是因為在**主進程(main process)沒有權限去存取渲染進程(render process)的內容**，而預載腳本會在**渲染進程載入前**執行，因此它有權限去存取**渲染進程的全域變數**跟**整個Node.js環境**。
  - `mainWindow.loadFile`用來將`index.html`載入到一個新的`BrowserWindow`中。
   在Electron中，視窗只能夠在`app`模組的`ready`事件已經成立時建立，這裡我們使用`app.whenReady()`來監聽`ready`事件，若成立就可以呼叫`createWindow()`。
   也因為Electron是跨平台的應用程式，所以需要**針對不同平台做對應的處理**，例如在**Windows**及**Linux**上，當**所有視窗關閉時通常就代表可以完全退出應用程式**。這時我們監聽`app`模組的`window-all-closed`事件，若平台不是macOS(darwin)，就呼叫`app.quit()`。
   如上面敘述，在**macOS**中即使**應用程式沒有任何視窗開啟，應用程式仍會繼續執行，且在沒有任何視窗開啟時，啟動應用程式應該要開啟一個新的視窗**。所以我們會在`app.whenReady()`中監聽`app`模組的`activate`事件，並在沒有任何視窗開啟時開啟一個新的視窗。
  
  

• preload.js

  / preload.js
  
  / All the Node.js APIs are available in the preload process.
  / It has the same sandbox as a Chrome extension.
  indow.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
  	const element = document.getElementById(selector)
  	if (element) element.innerText = text
  }
  
  for (const dependency of ['chrome', 'node', 'electron']) {
  	replaceText(`${dependency}-version`, process.versions[dependency])
  }
  )
  ``
   在`index.html`中我們列出了`Node.js`、`Chromium`和`Electron`，但後方應該是版本號的地方卻沒有數字，因為需要使用`preload.js`去讀取Node.js環境來插入版本號。
   `replaceText`使用了`document.getElementById`去讀取在HTML檔中元素的id，並將參數中的字串插入到該元素中。
   最後監聽`DOMContentLoaded`事件，當事件成立時，使用`replaceText`將Node.js的`process.versions`插入到HTML檔中。
  
  

今天介紹了main.js和preload.js，分別代表主進程及加載腳本，如此一來Electron應用程式就編寫完成了，明天會實際執行ELectron應用程式及如何打包Electron應用程式。

參考內容

Electron